<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/8/19
  Time: 22:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <title>地址管理</title>
    <link href="${pageContext.request.contextPath}/front/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/front/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="${pageContext.request.contextPath}/front/css/personal.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/front/css/addstyle.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/front/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/front/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
</head>
<body>
<!--头 -->
<header>
    <article>
        <div class="mt-logo">
            <!--顶部导航条 -->
            <div class="am-container header" >
                <div id="top-lo"></div>
                <%--<ul class="message-l">
                    <div class="topMessage">
                        <div class="menu-hd">
                            <a href="login.html" target="_top" class="h">亲，请登录</a>
                            <a href="register.html" target="_top">免费注册</a>
                        </div>
                    </div>
                </ul>--%>
                <ul class="message-r">
                    <div class="topMessage home">
                        <div class="menu-hd"><a href="index.jsp" target="_top" class="h">商城首页</a></div>
                    </div>
                    <div class="topMessage my-shangcheng">
                        <div class="menu-hd MyShangcheng"><a href="userInfo.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
                    </div>
                    <div class="topMessage mini-cart">
                        <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
                    </div>
                    <div class="topMessage favorite">
                        <div class="menu-hd"><a href="collection.html" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                </ul>
            </div>

            <!--悬浮搜索框-->

            <div class="nav white">
                <div class="logoBig">
                    <li><a href="index.html"><img src="images/logobig.png" /></a></li>
                </div>

                <div class="search-bar pr">
                    <a name="index_none_header_sysc" href="#"></a>
                    <form>
                        <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
                        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                    </form>
                </div>
            </div>

            <div class="clear"></div>
        </div>
        </div>
    </article>
</header>

<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="index.html">首页</a></li>
            <li class="qc"><a href="javascript:void(0)">闪购</a></li>
            <li class="qc"><a href="javascript:void(0)">限时抢</a></li>
            <li class="qc"><a href="javascript:void(0)">团购</a></li>
            <li class="qc last"><a href="javascript:void(0)">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" id="address">

                    <%--<li class="user-addresslist defaultAddr">
                        <span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">小叮当</span>
                            <span class="new-txt-rd2">159****1622</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">湖北</span>省
                                <span class="city">武汉</span>市
                                <span class="dist">洪山</span>区
                                <span class="street">雄楚大道666号(中南财经政法大学)</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="javascript:void(0)"><i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="javascript:void(0);" onClick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>--%>

                    <%--<li class="user-addresslist">
                        <span class="new-option-r"><i class="am-icon-check-circle"></i>设为默认</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">小叮当</span>
                            <span class="new-txt-rd2">159****1622</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">湖北</span>省
                                <span class="city">武汉</span>市
                                <span class="dist">洪山</span>区
                                <span class="street">雄楚大道666号(中南财经政法大学)</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="javascript:void(0)"><i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="javascript:void(0);" onClick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>
                    <li class="user-addresslist">
                        <span class="new-option-r"><i class="am-icon-check-circle"></i>设为默认</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">小叮当</span>
                            <span class="new-txt-rd2">159****1622</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">湖北</span>省
                                <span class="city">武汉</span>市
                                <span class="dist">洪山</span>区
                                <span class="street">雄楚大道666号(中南财经政法大学)</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="javascript:void(0)"><i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="javascript:void(0);" onClick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>--%>
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal" action="/AddressController/inAddress" method="post">

                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" placeholder="收货人">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" placeholder="手机号必填" type="email">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-address" class="am-form-label">所在地</label>
                                    <div class="am-form-content address" id="user-address">


                                        <select data-am-selected class="a">

                                        </select>

                                        <select data-am-selected class="b">

                                        </select>

                                        <select data-am-selected class="c">

                                        </select>


                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <input type="button" class="am-btn am-btn-danger" id="formBtn" value="保存">
                                        <%--<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>--%>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });

                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>

            <div class="clear"></div>

        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="http://www.itcast.cn">传智播客</a>
                    <b>|</b>
                    <a href="javascript:void(0)">商城首页</a>
                    <b>|</b>
                    <a href="javascript:void(0)">支付宝</a>
                    <b>|</b>
                    <a href="javascript:void(0)">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="http://www.itcast.cn">关于黑马</a>
                    <a href="javascript:void(0)">合作伙伴</a>
                    <a href="javascript:void(0)">联系我们</a>
                    <a href="javascript:void(0)">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有</em>
                </p>
            </div>
        </div>
    </div>

    <aside class="menu">
        <ul>
            <li class="person">
                <a href="index.html">个人中心</a>
            </li>
            <li class="person">
                <a href="javascript:void(0)">个人资料</a>
                <ul>
                    <li> <a href="information.html">个人信息</a></li>
                    <li> <a href="safety.html">安全设置</a></li>
                    <li class="active"> <a href="address.html">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="javascript:void(0)">我的交易</a>
                <ul>
                    <li><a href="order.html">订单管理</a></li>
                    <li> <a href="change.html">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="javascript:void(0)">我的资产</a>
                <ul>
                    <li> <a href="coupon.html">优惠券 </a></li>
                    <li> <a href="bonus.html">红包</a></li>
                    <li> <a href="bill.html">账单明细</a></li>
                </ul>
            </li>

            <li class="person">
                <a href="javascript:void(0)">我的小窝</a>
                <ul>
                    <li> <a href="collection.html">收藏</a></li>
                    <li> <a href="foot.html">足迹</a></li>
                    <li> <a href="comment.html">评价</a></li>
                    <li> <a href="news.html">消息</a></li>
                </ul>
            </li>

        </ul>

    </aside>
</div>

</body>
<script>
    $(function() {
        var userName="${sessionScope.frontUser.username }";
        var content="";
        if (userName){
            content="<ul class=\"message-l\">\n" +
                "            <div class=\"topMessage\">\n" +
                "                <div class=\"menu-hd\">\n" +
                "                    <a href=\"${pageContext.request.contextPath}/front/information.jsp\" target=\"_top\" class=\"h\">Hi,${sessionScope.frontUser.username }</a>\n" +
                "                </div>\n" +
                "            </div>\n" +
                "        </ul>"
        }else {
            content="<ul class=\"message-l\">\n" +
                "            <div class=\"topMessage\">\n" +
                "                <div class=\"menu-hd\">\n" +
                "                    <a href=\"${pageContext.request.contextPath}/UserController/login\" target=\"_top\" class=\"h\">亲，请登录</a>\n" +
                "                    <a href=\"${pageContext.request.contextPath}/UserController/regist\" target=\"_top\">免费注册</a>\n" +
                "                </div>\n" +
                "            </div>\n" +
                "        </ul>"
        }
        $("#top-lo").html(content);
        //获取收货地址
        $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath }/AddressController/getAddress",
            data : {userId:userName},
            dataType : "json",
            success:function (result) {
                showData(result);
            },
            error : function() {
                alert("异步请求失败")
            }
        });
        //获取省市县级联
        $.getJSON('${pageContext.request.contextPath}/finDall', '', function(data) {
            for ( var a = 0; a < data.length; a++) {
                var b = "<option value="+data[a].provinceName+">" + data[a].provinceName+ "</option>";
                $(".a").append(b);
            };
        });
        $(".a").change(function() {
            var z = $(this).val();
            $.getJSON('${pageContext.request.contextPath}/findByPid', 'provinceId=' + z, function(data) {
                console.log(data)
                $(".b").children().remove();
                $(".c").children().remove();
                for ( var a = 0; a < data.length; a++) {
                    var b = "<option value="+data[a].cityName+">"+ data[a].cityName + "</option>";
                    $(".b").append(b);
                }
            });
        });
        $(".b").change(function() {
            var c = $(this).val();
            $.getJSON('${pageContext.request.contextPath}/findByCid', 'cityId=' + c, function(data) {
                console.log(data)
                $(".c").children().remove();
                for ( var a = 0; a < data.length; a++) {
                    var city = "<option value="+data[a].townName+">"+ data[a].townName + "</option>";
                    $(".c").append(city);
                }
            });
        });

        //提交事件
        $("#formBtn").click(function () {
           $.ajax({
               type : "POST",
               url: "${pageContext.request.contextPath }/AddressController/inAddress",
               data: {
                   userId:userName,
                   contact:$("#user-name").val(),
                   mobile:$("#user-phone").val(),
                   provinceId:$(".a").val(),
                   cityId:$(".b").val(),
                   townId:$(".c").val(),
                   address:$("#user-intro").val()
               },
               dataType: "json",
               success : function(result) {
                   $.ajax({
                       type : "POST",
                       url : "${pageContext.request.contextPath }/AddressController/getAddress",
                       data : {userId:userName},
                       dataType : "json",
                       success:function (result) {
                           showData(result);
                       },
                       error : function() {
                           alert("异步请求失败")
                       }
                   });
               }
           })
        })
    })
    function showData(result){
        $("#address").empty();
        $.each(result,function (index, adress) {
                $("#address").append("<li class=\"user-addresslist defaultAddr\">\n" +
                    /*"                        <span class=\"new-option-r\"><i class=\"am-icon-check-circle\"></i>默认地址</span>\n" +*/
                    "                        <p class=\"new-tit new-p-re\">\n" +
                    "                            <span class=\"new-txt\">"+adress.contact+"</span>\n" +
                    "                            <span class=\"new-txt-rd2\">"+adress.mobile+"</span>\n" +
                    "                        </p>\n" +
                    "                        <div class=\"new-mu_l2a new-p-re\">\n" +
                    "                            <p class=\"new-mu_l2cw\">\n" +
                    "                                <span class=\"title\">地址：</span>\n" +
                    "                                <span class=\"province\">"+adress.provinceId+"</span>\n" +
                    "                                <span class=\"city\">"+adress.cityId+"</span>\n" +
                    "                                <span class=\"dist\">"+adress.townId+"</span>\n" +
                    "                                <span class=\"street\">"+adress.address+"</span></p>\n" +
                    "                        </div>\n" +
                    "                        <div class=\"new-addr-btn\">\n" +
                    "                            <a href=\"javascript:void(0)\"><i class=\"am-icon-edit\"></i>编辑</a>\n" +
                    "                            <span class=\"new-addr-bar\">|</span>\n" +
                    "                            <a href=\"javascript:void(0);\" onClick=\"delClick(this);\"><i class=\"am-icon-trash\"></i>删除</a>\n" +
                    "                        </div>\n" +
                    "                    </li>")
        });
    }
   function sheng(provinces) {
       var content3="";
       $.each(provinces,function (index, obj) {
           content3 += "<span class=\"province\">"+obj.provinceName+"</span>\n" +
               shi(obj.cities)+
                   "\n"
       })
       return content3;
   }
   function shi(cities) {
        var content4="";
        $.each(cities,function (index, obj) {
            content4 += "<span class=\"city\">"+obj.cityName+"</span>\n" +
                qu(obj.areas)+
                    "\n"
        })
       return content4;
   }
   function qu(areas) {
       var content5="";
       $.each(areas,function (index, obj) {
           content5 += "<span class=\"dist\">"+obj.townName+"</span>"
       })
       return content5;
   }
</script>
</html>
